<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>班级成绩分析</span>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>
      
      <div v-loading="loading">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基础分析" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">题型分析</div>
                  <div class="chart-body" ref="typeChart"></div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">难度分析</div>
                  <div class="chart-body" ref="difficultyChart"></div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="chart-container">
                  <div class="chart-title">章节分析</div>
                  <div class="chart-body chapter-chart-container" ref="chapterChart"></div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="智能教学分析" name="mining">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">聚类分析</div>
                  <div class="analysis-description">
                    <p>聚类分析将学生在各题目上的表现按得分率划分为三个类簇：</p>
                    <ul>
                      <li><strong>较差类簇(0-45%)</strong>：学生在这类题目上表现较差，需要重点关注和加强</li>
                      <li><strong>一般类簇(45-75%)</strong>：学生在这类题目上表现一般，有提升空间</li>
                      <li><strong>较好类簇(75-100%)</strong>：学生在这类题目上表现良好，已较好掌握</li>
                    </ul>
                  </div>
                  <div v-if="kmeansData.length > 0">
                    <div v-for="(cluster, index) in kmeansData" :key="index" class="cluster-card">
                      <h3>{{ formatClusterName(cluster) }}</h3>
                      <p>该类中共有 {{ cluster.itemCount }} 条答题记录，平均得分率: {{ cluster.avgScoreRatio }}%</p>
                      
                      <h4>题型分布:</h4>
                      <el-table :data="cluster.typeDistribution" style="width: 100%">
                        <el-table-column prop="typeName" label="题型"></el-table-column>
                        <el-table-column prop="count" label="数量"></el-table-column>
                        <el-table-column prop="percentage" label="百分比">
                          <template #default="scope">
                            {{ scope.row.percentage }}%
                          </template>
                        </el-table-column>
                      </el-table>
                      
                      <h4>难度分布:</h4>
                      <el-table :data="formatDifficultyDistribution(cluster.difficultyDistribution)" style="width: 100%">
                        <el-table-column prop="difficultyName" label="难度"></el-table-column>
                        <el-table-column prop="count" label="数量"></el-table-column>
                        <el-table-column prop="percentage" label="百分比">
                          <template #default="scope">
                            {{ scope.row.percentage }}%
                          </template>
                        </el-table-column>
                      </el-table>
                      
                      <div class="cluster-summary">
                        <h4>教学建议:</h4>
                        <p v-if="cluster.clusterName.includes('较差')">
                          该类题目学生掌握程度低，可能存在概念理解不清或学习方法不当的问题。
                          建议加强这类题目的基础知识讲解，提供更多的练习机会，适当降低难度循序渐进。
                          尤其关注主要题型"{{ getMainTypeName(cluster) }}"和难度分布较集中的题目。
                        </p>
                        <p v-else-if="cluster.clusterName.includes('一般')">
                          该类题目学生掌握程度一般，已有一定基础但需要巩固。
                          建议提供针对性练习，重点关注解题思路和方法，着重解决学生在此类题目上的薄弱环节。
                          对于主要题型"{{ getMainTypeName(cluster) }}"，可适当增加难度梯度。
                        </p>
                        <p v-else>
                          该类题目学生掌握较好，可以作为学生的优势领域。
                          建议适当提高难度，拓展知识深度，引导学生举一反三，加深对概念的理解。
                          可以利用这部分内容激发学生学习其他类型题目的兴趣和信心。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data">
                    暂无聚类分析数据
                  </div>
                </div>
              </el-col>
              
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">关联规则分析</div>
                  <div class="analysis-description">
                    <p>关联规则分析揭示了不同得分水平下的题目特征，包括题型、难度和章节的分布规律，可以帮助找出影响得分的关键因素。</p>
                    <p>分析中将每条答题记录的得分率划分为四个等级：</p>
                    <ul>
                      <li><strong>不及格(&lt;60%)</strong>：得分率低于60%的题目</li>
                      <li><strong>及格(≥60%)</strong>：得分率在60%到80%之间的题目</li>
                      <li><strong>良好(≥80%)</strong>：得分率在80%到90%之间的题目</li>
                      <li><strong>优秀(≥90%)</strong>：得分率在90%及以上的题目</li>
                    </ul>
                  </div>
                  <div v-if="associationRules.length > 0">
                    <div v-for="rule in sortedAssociationRules" :key="rule.scoreLevel" class="rule-card">
                      <h3>{{ rule.scoreLevel }} (平均得分率: {{ rule.avgScoreRatio }}%)</h3>
                      <p>{{ rule.description }}</p>
                      
                      <el-descriptions :column="2" border>
                        <el-descriptions-item label="题型">{{ rule.typeName }}</el-descriptions-item>
                        <el-descriptions-item label="占比">{{ rule.typePercentage }}%</el-descriptions-item>
                        <el-descriptions-item label="平均难度">{{ rule.avgDifficulty }}</el-descriptions-item>
                        <el-descriptions-item label="主要章节">{{ rule.mainChapter }}</el-descriptions-item>
                        <el-descriptions-item label="章节占比" :span="2">{{ rule.chapterPercentage }}%</el-descriptions-item>
                      </el-descriptions>
                      
                      <div class="rule-summary">
                        <h4>教学建议:</h4>
                        <p v-if="rule.scoreLevel === '不及格'">
                          不及格题目集中在"{{ rule.typeName }}"和"{{ rule.mainChapter }}"章节，平均难度为{{ rule.avgDifficulty }}。
                          建议重点关注这些内容，从基础概念讲起，提供更多的课堂练习和课后辅导。
                          可以设计阶梯式的习题，帮助学生逐步提高解题能力。同时检查教学方法是否适合学生的学习风格。
                        </p>
                        <p v-else-if="rule.scoreLevel === '及格'">
                          及格题目主要分布在"{{ rule.typeName }}"和"{{ rule.mainChapter }}"章节，已有一定掌握但尚需提高。
                          建议巩固这部分内容，强化难点讲解，适当增加例题分析的深度，帮助学生建立更系统的知识结构。
                          可以鼓励小组讨论，促进学生相互学习。
                        </p>
                        <p v-else-if="rule.scoreLevel === '良好'">
                          良好题目主要是"{{ rule.typeName }}"和"{{ rule.mainChapter }}"章节，学生掌握较好。
                          建议在保持现有水平的基础上，进一步挖掘知识的内在联系，提高学生的综合应用能力。
                          可以引入一些开放性问题，培养学生的创新思维和解决问题的能力。
                        </p>
                        <p v-else>
                          优秀题目集中在"{{ rule.typeName }}"和"{{ rule.mainChapter }}"章节，学生已很好地掌握。
                          建议利用这些优势内容，引导学生拓展学习，建立知识间的联系，提高学科素养。
                          可以安排部分学生担任小老师，帮助其他同学，同时也深化自己的理解。
                        </p>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data">
                    暂无关联规则分析数据
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup name="ClassAnalysisDetail">
import { ref, reactive, onMounted, computed, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import { getClassAnalysis, getClassMiningAnalysis } from '@/api/manage/analysis';

// 路由对象
const router = useRouter();
const route = useRoute();

// 分析对象ID (班级ID)
const classId = ref(null);

// 加载状态
const loading = ref(false);
// 当前激活的标签页
const activeTab = ref('basic');

// 图表数据
const typeNames = ref([]);
const typeRatios = ref([]);
const difficultyLevels = ref([]);
const difficultyRatios = ref([]);
const difficultyScores = ref([]);
const difficultyMaxScores = ref([]);
const chapterData = ref([]);

// 数据挖掘分析结果
const kmeansData = ref([]);
const associationRules = ref([]);

// 难度级别映射
const difficultyLabels = {
  1: '简单',
  2: '较简单',
  3: '中等',
  4: '较难',
  5: '困难'
};

// 格式化难度级别
function formatDifficultyLevel(level) {
  if (typeof level === 'string') {
    level = parseFloat(level);
  }
  
  const intLevel = Math.round(level);
  if (difficultyLabels[intLevel]) {
    return difficultyLabels[intLevel];
  }
  
  // 如果是小数，则显示描述 + 数值
  if (level % 1 !== 0) {
    if (level < 1.5) return '简单(' + level + ')';
    if (level < 2.5) return '较简单(' + level + ')';
    if (level < 3.5) return '中等(' + level + ')';
    if (level < 4.5) return '较难(' + level + ')';
    return '困难(' + level + ')';
  }
  
  return '难度' + level;
}

// 格式化难度分布数据
function formatDifficultyDistribution(difficultyDistribution) {
  if (!difficultyDistribution) return [];
  
  return difficultyDistribution.map(item => ({
    ...item,
    difficultyName: difficultyLabels[item.difficulty] || `难度${item.difficulty}`
  }));
}

// 格式化类簇名称
function formatClusterName(cluster) {
  if (!cluster) return '';
  return cluster.clusterName;
}

// 获取类簇中主要题型名称
function getMainTypeName(cluster) {
  if (!cluster || !cluster.typeDistribution || cluster.typeDistribution.length === 0) {
    return '未知题型';
  }
  
  // 按百分比排序找出最高的
  const sortedTypes = [...cluster.typeDistribution].sort((a, b) => b.percentage - a.percentage);
  return sortedTypes[0].typeName;
}

// 对关联规则进行排序
const sortedAssociationRules = computed(() => {
  const levelOrder = {
    '不及格': 1,
    '及格': 2,
    '良好': 3,
    '优秀': 4
  };

  return [...associationRules.value].sort((a, b) => {
    return levelOrder[a.scoreLevel] - levelOrder[b.scoreLevel];
  });
});

// 图表实例
let typeChartInstance = null;
let difficultyChartInstance = null;
let chapterChartInstance = null;

// 图表容器引用
const typeChart = ref(null);
const difficultyChart = ref(null);
const chapterChart = ref(null);

/** 获取班级分析数据 */
function getAnalysisData() {
  loading.value = true;
  
  // 获取基础分析数据
  getClassAnalysis(classId.value).then(response => {
    const data = response.data;
    
    // 设置图表数据
    typeNames.value = data.typeNames || [];
    typeRatios.value = data.typeRatios || [];
    difficultyLevels.value = data.difficultyLevels || [];
    difficultyRatios.value = data.difficultyRatios || [];
    difficultyScores.value = data.difficultyScores || [];
    difficultyMaxScores.value = data.difficultyMaxScores || [];
    chapterData.value = data.chapterData || [];
    
    // 初始化图表
    initCharts();
    
    // 获取数据挖掘分析结果
    getMiningData();
  }).catch(error => {
    console.error('获取班级分析数据失败:', error);
    loading.value = false;
    ElMessage.error('获取班级分析数据失败');
  });
}

/** 获取数据挖掘分析结果 */
function getMiningData() {
  getClassMiningAnalysis(classId.value).then(response => {
    const data = response.data;
    
    // 设置数据挖掘分析结果
    kmeansData.value = data.kmeansData || [];
    associationRules.value = data.associationRules || [];
    
    loading.value = false;
  }).catch(error => {
    console.error('获取数据挖掘分析结果失败:', error);
    loading.value = false;
  });
}

/** 初始化图表 */
function initCharts() {
  // 初始化题型雷达图
  initTypeChart();
  
  // 初始化难度折线图
  initDifficultyChart();
  
  // 初始化章节树状图
  initChapterChart();
}

/** 初始化题型雷达图 */
function initTypeChart() {
  if (!typeChart.value) return;
  
  if (typeChartInstance) {
    typeChartInstance.dispose();
  }
  
  typeChartInstance = echarts.init(typeChart.value);
  
  const option = {
    radar: {
      indicator: typeNames.value.map(name => ({ name, max: 100 }))
    },
    series: [{
      type: 'radar',
      data: [{
        value: typeRatios.value,
        name: '得分率(%)',
        areaStyle: {
          color: 'rgba(64, 158, 255, 0.6)'
        },
        lineStyle: {
          color: '#409EFF'
        },
        itemStyle: {
          color: '#409EFF'
        }
      }]
    }],
    tooltip: {
      trigger: 'item'
    }
  };
  
  typeChartInstance.setOption(option);
}

/** 初始化难度折线图 */
function initDifficultyChart() {
  if (!difficultyChart.value) return;
  
  if (difficultyChartInstance) {
    difficultyChartInstance.dispose();
  }
  
  difficultyChartInstance = echarts.init(difficultyChart.value);
  
  const option = {
    xAxis: {
      type: 'category',
      data: difficultyLevels.value.map(level => difficultyLabels[level] || `难度${level}`)
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [{
      data: difficultyRatios.value,
      type: 'line',
      smooth: true,
      symbolSize: 8,
      lineStyle: {
        width: 3,
        color: '#67C23A'
      },
      itemStyle: {
        color: '#67C23A'
      },
      label: {
        show: true,
        formatter: '{c}%'
      }
    }],
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const index = params[0].dataIndex;
        const score = difficultyScores.value[index] || 0;
        const maxScore = difficultyMaxScores.value[index] || 0;
        return `${params[0].name}: ${params[0].value}%<br/>得分/总分: ${score}/${maxScore}`;
      }
    }
  };
  
  difficultyChartInstance.setOption(option);
}

/** 初始化章节树状图 */
function initChapterChart() {
  if (!chapterChart.value) return;
  
  if (chapterChartInstance) {
    chapterChartInstance.dispose();
  }
  
  chapterChartInstance = echarts.init(chapterChart.value);
  
  // 创建完整的章节树状结构
  const completeChapterTree = buildCompleteChapterTree(chapterData.value);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        if (params.data.score !== undefined && params.data.maxScore !== undefined) {
          return `${params.name}: ${params.value || 0}%<br/>得分/总分: ${params.data.score || 0}/${params.data.maxScore || 0}`;
        } else {
          return `${params.name}: ${params.value || 0}%`;
        }
      }
    },
    series: [
      {
        type: 'tree',
        data: [completeChapterTree],
        top: '5%',
        left: '10%',
        bottom: '5%',
        right: '25%',
        symbolSize: 12,
        orient: 'horizontal',
        layout: 'orthogonal',  // 使用正交布局
        edgeShape: 'curve',    // 修改为曲线连接
        roam: true,            // 允许缩放和平移
        initialTreeDepth: 2,   // 初始展开深度
        itemStyle: {
          color: '#409EFF'
        },
        lineStyle: {
          color: '#ccc',
          width: 1.5
        },
        label: {
          position: 'bottom',  // 修改为底部显示
          verticalAlign: 'top',
          align: 'center',
          fontSize: 12,
          formatter: function(params) {
            // 横向显示章节名称和得分率
            const name = params.name;
            const value = params.data.value ? params.data.value + '%' : '0%';
            return name + ': ' + value;
          }
        },
        leaves: {
          label: {
            position: 'bottom',
            verticalAlign: 'top',
            align: 'center'
          }
        },
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  };
  
  chapterChartInstance.setOption(option);
}

/**
 * 根据章节数据和章节表构建完整的章节树
 * 考虑到章节的层级关系，包括缺失节点
 */
function buildCompleteChapterTree(chapterDataList) {
  // 创建章节映射表
  const chapterMap = new Map();
  
  // 定义章节结构表（来自用户提供的章节表）
  const chapterStructure = [
    { id: 0, name: '离散数学', parentId: null, orderNum: 0 },
    { id: 1, name: '集合', parentId: 0, orderNum: 1 },
    { id: 2, name: '集合间的关系', parentId: 1, orderNum: 1 },
    { id: 3, name: '关系', parentId: 0, orderNum: 2 },
    { id: 4, name: '函数', parentId: 0, orderNum: 3 },
    { id: 5, name: '无限集合', parentId: 0, orderNum: 4 },
    { id: 6, name: '命题逻辑', parentId: 0, orderNum: 5 },
    { id: 7, name: '谓词逻辑', parentId: 0, orderNum: 6 },
    { id: 8, name: '图', parentId: 0, orderNum: 7 },
    { id: 9, name: '集合的运算', parentId: 1, orderNum: 2 },
    { id: 10, name: '幂集和编码', parentId: 1, orderNum: 3 },
    { id: 11, name: '集合恒等式证明', parentId: 1, orderNum: 4 },
    { id: 12, name: '笛卡儿积', parentId: 3, orderNum: 1 },
    { id: 13, name: '关系的基本概念', parentId: 3, orderNum: 2 },
    { id: 14, name: '关系的运算', parentId: 3, orderNum: 3 },
    { id: 15, name: '关系的性质', parentId: 3, orderNum: 4 },
    { id: 16, name: '函数的基本性质', parentId: 4, orderNum: 1 },
    { id: 17, name: '特殊函数', parentId: 4, orderNum: 2 },
    { id: 18, name: '合成函数', parentId: 4, orderNum: 3 },
    { id: 19, name: '逆函数', parentId: 4, orderNum: 4 }
  ];
  
  // 初始化整个章节结构，填充默认值
  chapterStructure.forEach(chapter => {
    chapterMap.set(chapter.id, {
      id: chapter.id,
      name: chapter.name,
      parentId: chapter.parentId,
      orderNum: chapter.orderNum,
      value: 0,
      score: 0,
      maxScore: 0,
      children: []
    });
  });
  
  // 填充已有的章节数据
  chapterDataList.forEach(data => {
    const chapterId = data.chapterId || data.chapter_id;
    const score = data.totalScore || 0;
    const maxScore = data.maxScore || 0;
    const scoreRatio = data.scoreRatio || 0;
    
    if (chapterMap.has(chapterId)) {
      const chapter = chapterMap.get(chapterId);
      chapter.value = scoreRatio;
      chapter.score = score;
      chapter.maxScore = maxScore;
    }
  });
  
  // 构建章节树
  for (const chapter of chapterMap.values()) {
    if (chapter.parentId !== null && chapterMap.has(chapter.parentId)) {
      const parent = chapterMap.get(chapter.parentId);
      parent.children.push(chapter);
    }
  }
  
  // 对每个父节点的子节点按orderNum排序
  for (const chapter of chapterMap.values()) {
    if (chapter.children.length > 0) {
      chapter.children.sort((a, b) => a.orderNum - b.orderNum);
    }
  }
  
  // 计算父节点的总分和得分率
  calculateParentScores(chapterMap.get(0));
  
  // 返回根节点
  return chapterMap.get(0);
}

/**
 * 递归计算父节点的得分/总分和得分率
 */
function calculateParentScores(node) {
  let totalScore = node.score || 0;
  let totalMaxScore = node.maxScore || 0;
  
  // 递归处理子节点
  for (const child of node.children) {
    calculateParentScores(child);
    totalScore += child.score || 0;
    totalMaxScore += child.maxScore || 0;
  }
  
  // 更新当前节点的分数和得分率
  node.score = totalScore;
  node.maxScore = totalMaxScore;
  
  // 计算得分率
  if (totalMaxScore > 0) {
    node.value = ((totalScore / totalMaxScore) * 100).toFixed(2);
  } else {
    node.value = 0;
  }
  
  return node;
}

/** 返回上一页 */
function goBack() {
  router.push('/analysis/analysis');
}

// 监听窗口大小变化，重绘图表
function handleResize() {
  if (typeChartInstance) typeChartInstance.resize();
  if (difficultyChartInstance) difficultyChartInstance.resize();
  if (chapterChartInstance) chapterChartInstance.resize();
}

onMounted(() => {
  // 获取班级ID
  classId.value = route.query.classId;
  if (!classId.value) {
    ElMessage.error('班级ID不能为空');
    router.push('/analysis/analysis');
    return;
  }
  
  // 获取分析数据
  getAnalysisData();
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  // 清除窗口大小变化监听
  window.removeEventListener('resize', handleResize);
  
  // 销毁图表实例
  if (typeChartInstance) {
    typeChartInstance.dispose();
    typeChartInstance = null;
  }
  if (difficultyChartInstance) {
    difficultyChartInstance.dispose();
    difficultyChartInstance = null;
  }
  if (chapterChartInstance) {
    chapterChartInstance.dispose();
    chapterChartInstance = null;
  }
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.chart-body {
  height: 300px;
}

.chapter-chart-container {
  height: 500px; /* 增加章节图表高度 */
}

.cluster-card,
.rule-card {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.cluster-summary,
.rule-summary {
  margin-top: 15px;
  padding: 12px;
  background-color: #ecf5ff;
  border-left: 4px solid #409eff;
  border-radius: 0 4px 4px 0;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
  font-size: 14px;
}

.analysis-description {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
  color: #606266;
}

.analysis-description ul {
  margin: 0;
  padding-left: 20px;
}

.analysis-description li {
  margin-top: 5px;
}
</style> 